{% extends "base.html" %}
{% block head %}
<head>
    <meta charset="UTF-8">
    <title>测试管理系统</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="../../../static/layui/css/layui.css">
    <script src="../../../static/layui/layui.js"></script>
    <!--     <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script> -->
    <script type="text/javascript" src="../../../static/js/tool_p.js"></script>
</head>
{% endblock head %}
{% block left %}
{{ super() }}
{% endblock left %}
{% block right %}
{{ super() }}
<!-- 修改name（页面名称） -->
{% set name = '接口列表' %}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>{{name}}</legend>
</fieldset>
<!-- 页面私有部分 -->


<div>
		<span class="site-demo-button" id="apiadd">
			<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">新增接口
            </button>
		</span>
</div>

<form class="layui-form" lay-filter="pro" action="/monitor/apilist" method="POST" style="margin-top: 20px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">归属项目</label>
            <div class="layui-input-inline">
                <select id="proid" name="proid" lay-verify="required" lay-search="">
                    <option value="0"></option>
                    {% for i in prolist %}
                        <option value={{i[1]}}>{{i[0]}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <input class="layui-btn layui-btn-danger" type="submit" value="确定"></input>
    </div>
</form>

<table id='111' class="layui-table" style="margin-top:20px">
    <colgroup>
        <col width=3%>
        <col width=8%>
        <col width=15%>
        <col width=5%>
        <col width=5%>
        <col width=5%>
        <col width=8%>
    </colgroup>
    <thead>
    <tr>
        <th style="text-align: center; font-weight: bold ;font-size:18px">接口ID</th>
        <th style="text-align: center; font-weight: bold ;font-size:18px">接口名称</th>
        <th style="text-align: center; font-weight: bold ;font-size:18px">接口地址</th>
        <th style="text-align: center; font-weight: bold ;font-size:18px">归属项目</th>
        <th style="text-align: center; font-weight: bold ;font-size:18px">请求方式</th>
        <th style="text-align: center; font-weight: bold ;font-size:18px">参数</th>
        <th id = 't11' style="text-align: center; font-weight: bold ;font-size:18px">操作</th>
    </thead>
    <tbody>
    {% for i in apidata2 %}
    <tr class="table-item">
        <td style="text-align: center">{{i[0]}}</td>
        <td style="word-break:break-all">{{i[1]}}</td>
        <td style="word-break:break-all">{{i[2]}}</td>
        <td style="text-align: center">{{i[3]}}</td>
        <td style="text-align: center">{{i[4]}}</td>
        <td style="text-align: center">{{i[5]}}</td>
        <td id='t111'>
            {% if i[6] == 0 %}
            <span data-id={{i[0]}} class="layui-btn" onclick="apistatus(this)">启用</span>
            {% else %}
            <span data-id={{i[0]}} class="layui-btn layui-btn-danger" onclick="apistatus(this)">停用</span>
            {% endif %}
            <span data-id={{i[0]}} class="layui-btn " onclick="editapi(this)">编辑</span>
            <span data-id={{i[0]}}  class="layui-btn" onclick="delapi(this)">删除</span>
        </td>
    </tr>
    {% endfor %}
    </tbody>

</table>
<div id="test1"></div>

<script>
 	layui.use(['form', 'layedit', 'laydate'], function(){
  		var form = layui.form
  		,layer = layui.layer

    form.val('pro', {
      proid: "{{proid}}"
    })

	layui.use('layer', function(){ //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句


		//接口新增弹窗触发
		var addapi = {
			offset: function(othis){
				var type = othis.data('type')
				,text = othis.text();
                var apiid = othis.data('id');
				layer.open({
				type: 1
				,area: ['350px', '450px']
				,title:"新增接口"
				,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
				,id: 'apiadd '+ apiid //防止重复弹出
				,content:'<form class="layui-form" lay-filter="addDialog">\
<div class="layui-form-item" style="line-height:30px;margin-top: 20px"><label class="layui-form-label">接口名称：</label><div class="layui-input-inline"><input type="text" name="urlname" lay-verify="required" autocomplete="off" placeholder="请输入接口名称" class="layui-input"></div></div>\
<div class="layui-form-item" style="line-height:30px;margin-top: 20px"><label class="layui-form-label">接口地址：</label><div class="layui-input-inline"><input type="text" name="url" lay-verify="required" autocomplete="off" placeholder="请输入接口地址" class="layui-input"></div></div>\
<div class="layui-form-item" style="line-height:30px"><label class="layui-form-label">所属项目：</label><div class="layui-input-inline">\
<span><select name="proid" lay-verify="required" lay-search=""><option value="">请选择所属项目</option>{% for i in prolist %}<option value={{i[1]}}>{{i[0]}}</option>{% endfor %}</select></span></div></div>\
<div class="layui-form-item" style="line-height:30px"><label class="layui-form-label">请求方式：</label><div class="layui-input-inline">\
<span><select name="method" ><option value="">请选择请求方式</option><option value="GET">GET</option><option value="POST">POST</option></select></span></div></div>\
<label class="layui-form-label">接口参数：</label><div class="layui-input-inline"><textarea name="parameters_json" placeholder="请输入接口参数" class="layui-textarea"></textarea></div></form>'
				,btn: '保存'
				,btnAlign: 'c' //按钮居中
				,shade: 0 //不显示遮罩
				,success: function(layero, index){
                    form.render("select","addDialog");
                  }
				,yes: function(index,layero){
					var urlname = layero.find('input')[0].value;
					var url = layero.find('input')[1].value;
					var product = layero.find('select')[0].value;
					var method = layero.find('select')[1].value;
					var parameters_json = layero.find('textarea')[0].value;

					var xmlhttp;
			        xmlhttp = new XMLHttpRequest();
			        var data ='{ "urlname":"' + urlname + '","url" : "'+ url +'", "product" : "' + product + '","method" : "' + method + '", "parameters_json" : "' + parameters_json + '"}';
			        xmlhttp.open("POST","newapi",true);
			        xmlhttp.send(data);
				 	layer.close(index);
					xmlhttp.onreadystatechange = function()
					{
				        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
				            {
					            if (xmlhttp.responseText == 'ok')
					            {
					              location.reload();
					              alert ("新增成功")
					            }
					            else
					            {
					              alert('请登录')
					            }
				          	}
					    }

					}
				});
			}
		};

		$('#apiadd').on('click', 'button', function(){
			var othis = $(this), method = othis.data('method');
			addapi[method] ? addapi[method].call(this, othis) : '';
		})

	});
	})

layui.use('laypage', function(){
  var laypage = layui.laypage;

  //执行一个laypage实例
  laypage.render({
  elem: 'test1'
      ,limit:20
  ,count: {{ count }} //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数

    //首次不执行
    if(!first){
      //do something
                  var page=obj.curr
        {#location.href='http://127.0.0.1:5000/monitor/apilist?page='+ page#}
                    var xmlhttp;
                    var proid=document.getElementById('proid').value;
                    if (proid==""){
                        proid=0
                    }
            xmlhttp = new XMLHttpRequest();
            var data ='{  "page" :' + page + ',"proid" :' + proid + '}';
            xmlhttp.open("POST","apilist",true);
            xmlhttp.send(data);
            xmlhttp.onreadystatechange = function()
        {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
            {
document.getElementById("111").innerHTML = xmlhttp.responseText
            }
        }

    }
  }
});
});

</script>


{% endblock right %}
<!-- 此模板现有部分，除页面名称外，其他均不可编辑 -->